<template>
	<view class="page">
		<view class="info_box" style="padding-bottom: 40rpx;">
			<view class="info_box_base">
				<view class="info_box_base_title" style="font-weight: bold;margin-bottom: 10rpx">工程信息</view>
				<view class="info_box_base_item">所属地区：{{baseInfo.region}}</view>
				<view class="info_box_base_item">站点编号：{{baseInfo.site_number}}</view>
				<view class="info_box_base_item" v-if="baseInfo.operators == 1">运营商：中国移动</view>
				<view class="info_box_base_item" v-if="baseInfo.operators == 2">运营商：中国电信</view>
				<view class="info_box_base_item" v-if="baseInfo.operators == 3">运营商：中国联通</view>
				<view class="info_box_base_item">
					<text>站点名称：</text>
					<u--input @chage="chageTitle" @blur="changeTitle" v-model="baseInfo.title"
						:disabled="editTitle?false:true" placeholder="请输入站点名称" border="bottom"></u--input>
					<view class="" @click="editTitle = true" style="color: rgb(25, 175, 201);font-size: 25rpx;">编辑
					</view>
				</view>
				<view class="info_box_base_item_1">
					<view class="info_box_base_item_img_title">站点照片</view>
					<view class="info_box_base_item_img_box">
						<u-upload :fileList="fileList1" width="65" height="65" @afterRead="afterRead"
							@delete="deletePic" name="1" multiple :maxCount="10"></u-upload>
					</view>
				</view>
				<view class="info_box_base_item">
					<text>站点地址：</text>
					<u--input placeholder="请输入站点地址" @blur="changeAddress" :disabled="editAddress?false:true"
						v-model="baseInfo.site_address" border="bottom"></u--input>
					<view class="" @click="editAddress = true" style="color: rgb(25, 175, 201);font-size: 25rpx;">编辑
					</view>
				</view>


				<view class="info_box_base_item_1">
					<view class="info_box_base_item_img_title">定位照片</view>
					<view class="info_box_base_item_img_box">
						<u-upload :fileList="fileList2" width="65" height="65" @afterRead="afterRead"
							@delete="deletePic" name="2" multiple :maxCount="10"></u-upload>
					</view>
				</view>
				<!-- <view class="info_box_base_item">
					<text>联系人及电话：</text>
					{{contactzh}} 
				</view> -->

				<view class="info_box_base_item">
					<text>联系人：</text>
					<u--input placeholder="请输入联系人" @blur="changeLxr" :disabled="editLxr?false:true"
						v-model="baseInfo.contacts" border="bottom"></u--input>
					<view class="" @click="editLxr = true" style="color: rgb(25, 175, 201);font-size: 25rpx;">编辑
					</view>
				</view>
				<view class="info_box_base_item">
					<text>联系电话：</text>
					<u--input placeholder="请输入联系电话" maxlength="11" @blur="changeTel" :disabled="editTel?false:true"
						v-model="baseInfo.phonetel" border="bottom"></u--input>
					<view class="" @click="editTel = true" style="color: rgb(25, 175, 201);font-size: 25rpx;">编辑
					</view>
				</view>

				<view class="info_box_base_item">
					<view class="info_box_base_item" style="width: 50%;">
						<text><text class="bt">*</text>经度：</text>
						<u--input placeholder="请输入经度" v-model="params.longitude" border="bottom"></u--input>
					</view>
					<view class="info_box_base_item" style="width: 50%;">
						<text><text class="bt">*</text>纬度：</text>
						<u--input placeholder="请输入纬度" v-model="params.latitude" border="bottom"></u--input>
					</view>
				</view>
				<view class="info_box_base_item" @click="show = true">
					<text><text class="bt">*</text>网络类型：
						<text v-if="!wllxText">请选择</text>
						<text v-if="wllxText">{{wllxText}}</text></text>
				</view>

				<view class="info_box_base_item">
					<text><text class="bt">*</text>计划覆盖面积：</text>
					<u--input placeholder="请输入计划覆盖面积" v-model="params.planned_coverage_area" border="bottom"></u--input>
				</view>
				<view class="info_box_base_item">
					<text><text class="bt">*</text>计划覆盖区域描述：</text>
					<u--input placeholder="请输入计划覆盖区域描述" v-model="params.descriptionof_plannedcoveragearea"
						border="bottom"></u--input>
				</view>

				<view class="info_box_base_item_1">
					<view class="info_box_base_item_img_title"><text class="bt">*</text>设备材料数量：</view>
					<view class="info_box_base_item_1_item" style="display: flex;flex-direction: row;flex-wrap: wrap;">
						<view class="info_box_base_item_1_item_i">
							<text>接收设备：</text>
							<u--input value="1"  v-model="params.equi_mater_receivingdevice"
								border="bottom"></u--input>
						</view>
						<view class="info_box_base_item_1_item_i">
							<text>覆盖设备：</text>
							<u--input value="1" type="number" v-model="params.equi_mater_coveragedevice"
								border="bottom"></u--input>
							<!-- <uni-data-select :clear="false" v-model="params.equi_mater_coveragedevice"
								:localdata="rangeSb" @change="changeSb"></uni-data-select> -->
						</view>
						<view class="info_box_base_item_1_item_i">
							<text>4口扩展：</text>
							<u--input v-model="params.port_4expansion" type="number" @input="change4k"
								border="bottom"></u--input>
						</view>
						<view class="info_box_base_item_1_item_i">
							<text>8口扩展：</text>
							<u--input v-model="params.port_8expansion" type="number" @input="change8k"
								border="bottom"></u--input>
						</view>
						<view class="info_box_base_item_1_item_i">
							<text>1/2馈线：</text>
							<u--input v-model="params.feeder" border="bottom"></u--input>
						</view>
						<view class="info_box_base_item_1_item_i">
							<text>1/2接头：</text>
							<u--input v-model="params.joint" border="bottom"></u--input>
						</view>
					</view>
				</view>

				<view class="info_box_base_item">
					<text>数量说明：</text>
					<u--input placeholder="请输入数量说明" v-model="params.quantity_desc" border="bottom"></u--input>
				</view>
				<view class="info_box_base_item" @click="showdate = true">
					<text>计划开工时间<text style="color: red;">*</text>：</text>
					{{planned_start_time}}
				</view>


			</view>
			<u-action-sheet :actions="wllx" @close="show = false" @select="selctWllx" :closeOnClickOverlay="true"
				:closeOnClickAction="true" :title="title" :show="show"></u-action-sheet>

			<u-datetime-picker :show="showdate" @cancel="showdate=false" @close="showdate=false" @confirm="confirmDate"
				v-model="value1" mode="datetime"></u-datetime-picker>
			<view class="btn" @click="sumbitFun">提交</view>
		</view>
	</view>
</template>

<script>
	import {
		api,
		apiBaseUrl,
		http
	} from '@/config/common.js'
	export default {
		data() {
			return {
				editLxr: false,
				editTel: false,

				rangeSb: [],
				contactzh: '',
				editTitle: false,
				editAddress: false,
				id: '',
				baseInfo: {},
				wllxText: '',
				planned_start_time: uni.$u.timeFormat(Number(new Date()), 'yyyy-mm-dd hh:MM:ss'),
				showdate: false,
				value1: Number(new Date()),

				show: false,
				title: '标题',

				fileList1: [],
				fileList2: [],
				wllx: [],
				eparams: {

				},
				params: {
					site_photos: '', //站点照片
					positioning_photos: '', //定位照片
					longitude: '',
					latitude: '',
					network_type_id: '', //网络类型id
					planned_coverage_area: '',
					descriptionof_plannedcoveragearea: '',
					quantity_desc: '',
					equi_mater_receivingdevice: 1,
					equi_mater_coveragedevice: '',
					port_4expansion: '',
					port_8expansion: '',
					feeder: '',
					joint: '',
				}
			}
		},
		components: {},
		filters: {},
		mounted() {},
		// watch: {
		// 	'params.port_8expansion': {
		// 		handler(newVal, oldVal) {
		// 			this.$nextTick(() => {
		// 				this.params.port_8expansion = 1
		// 				this.params.port_4expansion = 0
		// 			})
		// 		},
		// 		// 开启深度监听
		// 		deep: true
		// 	},
		// 	'params.port_4expansion': {
		// 		handler(newVal, oldVal) {
		// 			this.$nextTick(() => {
		// 				this.params.port_4expansion = 1
		// 				this.params.port_8expansion = 0
		// 			})
		// 		},
		// 		// 开启深度监听
		// 		deep: true
		// 	}
		// },
		onLoad(e) {
			this.id = e.id
			this.lookInfo()
			this.getWlle()
			this.getBaseInfo()
			this.getfgsb()
			 
		},
		onShow() {},
		onPageScroll(e) {},
		beforeDestroy() {},
		methods: {
			change4k(e) {  
				if (e != 0) {
					let that = this
					that.$nextTick(() => { 
					that.params.port_4expansion = 1 
					})
					that.params.port_8expansion = 0
				}
				
			},
			change8k(e) {  
				if (e != 0) {
					let that = this
					that.$nextTick(() => {
						that.params.port_8expansion = 1
					})
					that.params.port_4expansion = 0
				} 
				
			},
			//选择覆盖设备
			// changeSb(e) {
			// 	this.rangeSb.forEach(function(item, index) {
			// 		if (e == index) {
			// 			this.params.equi_mater_coveragedevice = item.value
			// 		}
			// 	})
			// },
			//覆盖设备
			getfgsb() {
				let that = this
				uni.showLoading({})
				api.post('/api/shop/engin_coverage_device', {}).then(res => {
					let rst = res.data
					uni.hideLoading()
					if (rst.code == 1) {
						that.rangeSb = rst.data
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			changeTel() {
				let phonetel = this.baseInfo.phonetel
				api.post('api/shop/sitinfo_ediot', {
					survey_id: this.id,
					type: 4,
					phonetel: phonetel
				}).then(res => {
					let rst = res.data
					if (rst.code == 1) {
						this.editTel = false
					}
				}).catch(err => {

				})
			},
			changeLxr() {
				let contacts = this.baseInfo.contacts
				api.post('api/shop/sitinfo_ediot', {
					survey_id: this.id,
					type: 3,
					contacts: contacts
				}).then(res => {
					let rst = res.data
					if (rst.code == 1) {
						this.editLxr = false
					}
				}).catch(err => {

				})
			},
			changeAddress() {
				let title = this.baseInfo.site_address
				api.post('api/shop/sitinfo_ediot', {
					survey_id: this.id,
					type: 2,
					site_address: title
				}).then(res => {
					let rst = res.data
					if (rst.code == 1) {
						this.editAddress = false
					}
				}).catch(err => {

				})
			},
			changeTitle() {
				let title = this.baseInfo.title
				api.post('api/shop/sitinfo_ediot', {
					survey_id: this.id,
					type: 1,
					title: title
				}).then(res => {
					let rst = res.data
					if (rst.code == 1) {
						this.editTitle = false
					}
				}).catch(err => {

				})
			},
			lookInfo() {
				uni.showLoading({})
				api.post('api/shop/submit_engineeringinfo', {
					survey_id: this.id,
					type: 2

				}).then(res => {
					if (!res.data) {
						return
					}
					let rst = res.data
					uni.hideLoading()
					if (rst.code == 1) {
						let that = this
						that.wllx.forEach(function(item) {
							if (item.id == rst.data.network_type_id) {
								that.wllxText = item.name
							}
						})
						if (!rst.data.equi_mater_receivingdevice) {
							rst.data.equi_mater_receivingdevice = 1
						}
						let temp_1 = []
						if (rst.data.site_photos) {
							rst.data.site_photos.forEach((item, index) => {
								temp_1.push({
									url: item
								})
							})
						}
						that.fileList1 = temp_1

						let temp_2 = []
						if (rst.data.positioning_photos) {
							rst.data.positioning_photos.forEach((item, index) => {
								temp_2.push({
									url: item
								})
							})
						}
						that.fileList2 = temp_2
						that.params = rst.data
						that.params.equi_mater_coveragedevice = parseInt(that.params.equi_mater_coveragedevice)
					}

				}).catch(err => {
					uni.hideLoading()
				})
			},
			sumbitFun() {
				let rst = this.params
				rst.site_photos = this.fileList1 ? this.fileList1.map(item => item.url).join(',') : [];
				rst.positioning_photos = this.fileList2 ? this.fileList2.map(item => item.url).join(',') : [];

				if (rst.equi_mater_coveragedevice > this.rangeSb[0]['number_code']) {
					uni.$u.toast("覆盖设备最大不能超过" + this.rangeSb[0]['number_code'])
					return;
				}
				if (!rst.longitude || !rst.longitude || !rst.network_type_id ||
					!rst.planned_coverage_area ||
					!rst.descriptionof_plannedcoveragearea ||
					!rst.equi_mater_receivingdevice || !rst.descriptionof_plannedcoveragearea 
					|| rst.port_4expansion === "" ||
					!rst.port_8expansion  === "" || !rst.feeder || !rst.joint
				) {
					uni.$u.toast("必填项不能为空")
					return;
				}

				uni.showLoading({})
				api.post('api/shop/submit_engineeringinfo', {
					survey_id: this.id,
					...rst,
					planned_start_time: this.planned_start_time,
					type: 1
				}).then(res => {
					let rsttt = res.data

					uni.hideLoading()
					if (rsttt.code == 1) {
						uni.navigateTo({
							url: '/pages/kcsj/index'
						})
					} else {
						uni.$u.toast(rsttt.msg)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			//站点信息显示
			getBaseInfo() {
				uni.showLoading({})
				api.post('/api/shop/kanc_site_information', {
					survey_id: this.id
				}).then(res => {
					let rst = res.data
					uni.hideLoading()
					if (rst.code == 1) {
						this.baseInfo = rst.data
						this.contactzh = this.baseInfo.contacts + " " + this.baseInfo.phonetel
					}

				}).catch(err => {
					uni.hideLoading()
				})
			},
			selctWllx(e) {
				this.params.network_type_id = e.id
				this.wllxText = e.title
				this.show = false
			},
			//网络类型
			getWlle() {
				uni.showLoading({})
				api.post('/api/shop/survey_network_type', {}).then(res => {
					let rst = res.data
					uni.hideLoading()
					if (rst.code == 1) {
						let rstt = rst.data
						rstt.map(function(item) {
							item.name = item.title
						})
						this.wllx = rst.data
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},

			confirmDate(e) {
				this.planned_start_time = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss');
				this.showdate = false
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: apiBaseUrl + '/api/shop/upload',
						filePath: url,
						name: 'file',
						header: {
							'method': "xj_user",
							'token': uni.getStorageSync('token')
						},
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								let rst = JSON.parse(res.data)
								if (rst.code == 1) {
									resolve(rst.data)
								} else {
									uni.$u.toast(rst.msg)
									this.deletePic(event)
								}
							}, 1000)
						}
					});
				})
			},
		}
	};
</script>

<style scoped>
	::v-deep .uni-select__selector-item {
		font-size: 26rpx !important;
	}

	::v-deep .uni-select__input-text {
		font-size: 26rpx;
		white-space: nowrap;
		/* 确保文本在一行内显示 */
		overflow: hidden;
		/* 超出容器的文本隐藏 */
		text-overflow: ellipsis;
		/* 超出部分显示省略号 */
		width: 40%;
	}

	::v-deep .uni-select {
		padding: 0 !important;
		border: none !important;
	}

	.info_box_base_item_1_item_i {
		width: 30%;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 3%;
	}

	.bt {
		color: red;
		margin-right: 10rpx;
	}

	.btn {
		width: 500rpx;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		margin-top: 40rpx;
		background-color: rgb(70, 179, 255);
		color: #fff;
		border-radius: 40rpx;
		font-size: 32rpx;
	}

	::v-deep .uni-input-input {
		font-size: 26rpx;
	}

	::v-deep .uni-input-placeholder {
		font-size: 26rpx;
	}

	.info_box_base_item_img_title {
		font-size: 25rpx;
		margin: 20rpx 0;
	}

	.gcxt_b_wy_reason {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.gcxt_b_wy {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 20rpx 0;
	}

	.info_box_base {
		border: 1px solid rgb(235, 229, 229);
		padding: 20rpx;
		font-size: 25rpx;
		margin-top: 20rpx;
	}

	.info_box_base_item {
		line-height: 45rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.info_box {
		width: 710rpx;
		margin: 0 auto;

	}

	page {
		background-color: #fff;
	}
</style>